<template>
  <div>
    <h4>商品：</h4>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item.shopName }} {{ item.price + '元/份' }}
      </li>
    </ul>
    <h4>数量：</h4>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item.shopName }}
        <button @click="decrease(index)">-</button>
        {{ item.count }}
        <button @click="add(index)" :value="item.price">+</button>
      </li>
    </ul>
    <p>总价：{{ total }}</p>
  </div>
</template>

<script>
export default {
  props: ['arr'],
  data () {
    return {}
  },
  methods: {
    add (id) {
      //   this.$emit('addFood', id)
      this.arr[id].count++
    },
    decrease (id) {
      if (this.arr[id].count <= 0) return
      this.arr[id].count--
    }
  },
  computed: {
    total () {
      let sum = 0
      this.arr.forEach(item => {
        sum += item.price * item.count
      })
      return sum
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
}
</style>
